<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script src="../js/vue.js"></script>

<!-- 
    几个注意点：
        1.关于组件名：
            （1）一个单词组成：
                    第一种写法（首字母小写）：school
                    第二种写法（首字母大写）：School
            （2）多个单词组成：
                    第一种写法：my-school
                    第二种写法：MySchool（需要Vue脚手架支持）
            （3）备注
                    1）组件名要回避HTML中已有的元素名称，例如：h2、H2都不行
                    2)可以使用name指定组件在开发者工具中呈现的名字
        2.关于组件标签
            （1）第一种写法：<school></school>
            （2）第二种写法：<school/>
            备注：没有使用脚手架时，<school/>会导致后续组件不能渲染

        3.简写：
            const school = Vue.extend(options)  =>   const school = options
 -->
<body>
    <div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false;
        const school = Vue.extend({
            name:"school",
            data() {
                return {
                    name:"尚硅谷",
                    address:"北京"
                }
            },
            template:`
            <div>
                <h2>{{name}}</h2>
                <h2>{{address}}</h2>
            </div>
            `
        })
        new Vue({
            el: "#root",
            components:{
                School:school
            }
        })
    </script>
</body>

</html>